<template>
  <layout title="progress进度条">
    <layout-content title="基础使用">
      <view class="tn-flex-column tn-flex-center tn-col-12">
        <view class="tn-col-12">
          <tn-line-progress :percent="percentValue"></tn-line-progress>
        </view>
        <view class="tn-margin-top-sm">
          <tn-circle-progress :percent="percentValue"></tn-circle-progress>
        </view>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <view class="tn-flex-column tn-flex-center tn-col-12">
        <view class="tn-col-12">
          <tn-line-progress :percent="percentValue" active-color="tn-bg-indigo" inactive-color="tn-bg-indigo--light"></tn-line-progress>
        </view>
        <view class="tn-margin-top-sm">
          <tn-circle-progress :percent="percentValue" active-color="#31E749" inactive-color="#FAD8D6"></tn-circle-progress>
        </view>
      </view>
    </layout-content>

    <layout-content title="设置尺寸">
      <view class="tn-flex-column tn-flex-center tn-col-12">
        <view class="tn-col-12">
          <tn-line-progress :percent="percentValue" height="10"></tn-line-progress>
        </view>
        <view class="tn-margin-top-sm">
          <tn-circle-progress :percent="percentValue" border-width="10" width="140"></tn-circle-progress>
        </view>
      </view>
    </layout-content>

    <layout-content title="显示数值">
      <view class="tn-flex-column tn-flex-center tn-col-12">
        <view class="tn-col-12">
          <tn-line-progress :percent="percentValue" show-value></tn-line-progress>
        </view>
        <view class="tn-margin-top-sm">
          <tn-circle-progress :percent="percentValue" show-value></tn-circle-progress>
        </view>
      </view>
    </layout-content>

    <layout-content title="条纹设置">
      <view class="tn-flex-column tn-flex-center tn-col-12">
        <view class="tn-col-12">
          <tn-line-progress :percent="percentValue" striped :striped-animation="false"></tn-line-progress>
        </view>
        <view class="tn-col-12 tn-margin-top-sm">
          <tn-line-progress :percent="percentValue" striped></tn-line-progress>
        </view>
      </view>
    </layout-content>

    <view class="operation-btn">
      <tn-button shape="round" size="lg" @click="operationPercent">修改进度</tn-button>
    </view>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnLineProgress from '@/tuniao-ui/components/tn-progress/src/LineProgress.vue'
import TnCircleProgress from '@/tuniao-ui/components/tn-progress/src/CircleProgress.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 进度值
const percentValue = ref<number>(20)
const operationPercent = () => {
  percentValue.value += 10
  if (percentValue.value > 100) percentValue.value = 0
}
</script>

<style lang="scss" scoped>
.operation-btn {
  position: fixed;
  bottom: 6%;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
}
</style>
